<template>
  <el-select
    v-model="selected"
    label-key="Id"
    clearable
    filterable
    :placeholder="$language.local('请选择') + $language.local('客户')"
    @change="selectChange"
    v-loadmore="loadMore"
    class="el-select"
  >
    <el-option
      v-for="item in merchants"
      :key="item.Id"
      :label="item.customerName"
      :value="item"
    >
    </el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: String,
    sid: {
      type: [String, Number],
      default: 4,
    },
  },
  data() {
    return {
      selected: this.value,
      merchants: [],
      queryInfo: {
        page: 1,
        pageSize: 10,
        keywords: "",
      },
      maxPage: 0,
    };
  },
  watch: {
    sid(newValue) {
      // console.log(newValue);
      this.queryInfo.sid = newValue;
      this.getMerchants();
    },
  },
  created() {
    // this.getMerchants();
  },
  // watch: {
  //   value(newValue) {
  //     this.selected.Id = newValue;
  //   },
  // },

  methods: {
    async getMerchants() {
      let response = await this.$http.get(
        "/api/Common/GetMerchantList",
        this.queryInfo
      );
      this.maxPage = Math.ceil(response.TotalCount / this.queryInfo.pageSize);
      this.merchants = this.merchants.concat(response.data.Data);
    },
    selectChange(e) {
      this.$emit("change", e);
      this.$emit("input", e.Name);
    },
    async loadMore() {
      this.queryInfo.page++;
      if (this.queryInfo.page > this.maxPage) {
        return;
      }

      this.loading = true;
      await this.getMerchants();
      this.loading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
</style>
